<template>
   <div>
    <header class="register2">
    <a class="iconfont icon-fanhui" @click="back"></a><h1>注册</h1>
    </header>
    <div class="register2-tel">
        <div class="register2-input">
            <i class="iconfont icon-shouji1"></i>
            <input type="text" name="tel" id="" placeholder="手机号" v-model="tel">
        </div>
        <div class="register2-btn" @click="register">下一步</div>
        <div class="login-btn">
            <span>已有帐号?</span><a @click="loginTo">登录</a>
        </div>
    </div>
    </div>
</template>

<script>
import Vue from 'vue'
import { Toast } from 'vant'
import { findTel } from '@/utils/api.js'

Vue.use(Toast)
export default {
  data () {
    return {
      tel: ''
    }
  },
  methods: {
    back () {
      this.$router.back()
    },
    loginTo () {
      this.$router.push('/login')
    },
    register () {
      // console.log(this.tel)
      if (/^1[3456789]\d{9}$/.test(this.tel)) {
        let obj = { tel: this.tel }
        findTel(obj).then(data => {
          if (data.code === '0000') {
            this.$router.push({ path: '/register-ing', query: { tel: this.tel } })
          } else {
            Toast.fail('手机号已注册请直接登录')
          }
        })
      } else {
        Toast.fail('手机号不正确')
      }
    }
  }
}
</script>

<style lang="scss">
 .register2{
     height:0.44rem;
     display: flex;
     align-items: center;
     border-bottom: 0.01rem solid #f2f2f2;
     h1{
         font-size:0.18rem;
         display: inline-block;
         width: 100%;
         text-align: center;
         font-family: 'Microsoft Yahei';
         color:#030303;
         font-weight: 400;
         padding-right:0.6rem;
     }
     a{
         display: inline-block;
         font-size:0.18rem;
         width:0.4rem;
         height:0.44rem;
         margin-right: .2rem;
         color: #817f7f;
         display:flex;
         align-items: center;
         justify-content: center;
         font-weight: 500;
     }
 }
 .register2-tel{
     height: 3rem;
     display: flex;
     justify-content: center;
     flex-direction: column;
     .register2-input{
         margin:0 auto;
         margin-top:0.5rem;
         font-size: 0.14rem;
         display: flex;
          justify-content: center;
          align-items: center;
          width: 3.3rem;
          padding: 0.05rem;
          border-bottom: 0.01rem solid #e3e3e3;
          i{
              display: inline-block;
          }
         input{
             border:0;
              font-size: 0.14rem;
              width:2.97rem;
              height: 0.34rem;
              text-indent: 0.1rem;
              background: #fff;
         }
     }
 }
 .register2-btn{
      font-size: 0.16rem;
      height: 0.44rem;
      color:#fff;
      background: #36bc7c;
      border-radius: 0.08rem;
      text-align: center;
      line-height: 0.44rem;
      width:3.3rem;
      margin: 0.44rem auto;
 }
 .login-btn{
     display: flex;
     align-items: center;
     justify-content:flex-end;
     a{
         display: inline-block;
         font-size: 0.12rem;
         color: #656565;
         border:0.01rem solid #f7f7f7;
         padding: 0.03rem 0.1rem;
         border-radius: 0.07rem;
         margin:0 0.1rem
     }
     span{
         display: inline-block;
         font-size: 0.1rem;
         color: #989898;
     }
 }
</style>
